<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>表格组件 | CatchAdmin 官网</title>
    <meta name="description" content="">
    <meta name="generator" content="VuePress 1.8.2">
    <style>a[title="站长统计"]{display:none}</style>
    <script data-ad-client="ca-pub-1505209242532150" async="true" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
    <script src="https://v1.cnzz.com/z_stat.php?id=1279921342&amp;web_id=1279921342"></script>
    <meta name="description" content="基于 Thinkphp & Vue 开发的后台管理框架">
    <meta name="keywords" content="catchadmin, 后台管理, 前后端分离, thinkphp后台管理框架, thinkphp前后端分离框架,php, elementui">
    <link rel="preload" href="/assets/css/0.styles.6834c255.css" as="style"><link rel="preload" href="/assets/js/app.d0396f44.js" as="script"><link rel="preload" href="/assets/js/2.1cef47df.js" as="script"><link rel="preload" href="/assets/js/7.ba30e213.js" as="script"><link rel="prefetch" href="/assets/js/10.483f2013.js"><link rel="prefetch" href="/assets/js/11.981d4461.js"><link rel="prefetch" href="/assets/js/12.95d2c383.js"><link rel="prefetch" href="/assets/js/13.061c2fe0.js"><link rel="prefetch" href="/assets/js/14.ec2753db.js"><link rel="prefetch" href="/assets/js/15.8ba1c321.js"><link rel="prefetch" href="/assets/js/16.f7f0d34c.js"><link rel="prefetch" href="/assets/js/17.aac0bf62.js"><link rel="prefetch" href="/assets/js/18.2e2fe306.js"><link rel="prefetch" href="/assets/js/19.aee304b3.js"><link rel="prefetch" href="/assets/js/20.86a73bc1.js"><link rel="prefetch" href="/assets/js/21.8992c972.js"><link rel="prefetch" href="/assets/js/22.0a78500a.js"><link rel="prefetch" href="/assets/js/23.06342909.js"><link rel="prefetch" href="/assets/js/24.06fd96a3.js"><link rel="prefetch" href="/assets/js/25.00664d4e.js"><link rel="prefetch" href="/assets/js/26.c3d4b548.js"><link rel="prefetch" href="/assets/js/27.3c6927ad.js"><link rel="prefetch" href="/assets/js/28.74498c0b.js"><link rel="prefetch" href="/assets/js/29.aae1a826.js"><link rel="prefetch" href="/assets/js/3.4d2bdca7.js"><link rel="prefetch" href="/assets/js/30.c7732a2c.js"><link rel="prefetch" href="/assets/js/31.20403043.js"><link rel="prefetch" href="/assets/js/32.7b8e9cfe.js"><link rel="prefetch" href="/assets/js/33.8610da11.js"><link rel="prefetch" href="/assets/js/4.d7b1015b.js"><link rel="prefetch" href="/assets/js/5.ff87de2e.js"><link rel="prefetch" href="/assets/js/6.0e91e688.js"><link rel="prefetch" href="/assets/js/8.35122549.js"><link rel="prefetch" href="/assets/js/9.081b18e5.js">
    <link rel="stylesheet" href="/assets/css/0.styles.6834c255.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="ant-row"><div class="sidebar-button"><i aria-label="icon: bars" class="anticon anticon-bars"><svg viewBox="0 0 1024 1024" focusable="false" data-icon="bars" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M912 192H328c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h584c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 284H328c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h584c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 284H328c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h584c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM104 228a56 56 0 1 0 112 0 56 56 0 1 0-112 0zm0 284a56 56 0 1 0 112 0 56 56 0 1 0-112 0zm0 284a56 56 0 1 0 112 0 56 56 0 1 0-112 0z"></path></svg></i> <span></span></div> <div class="ant-col ant-col-xs-24 ant-col-sm-24 ant-col-md-6 ant-col-lg-5 ant-col-xl-5 ant-col-xxl-4"><a href="/" class="router-link-active no-logo home-link"><!----> <span class="site-name">CatchAdmin 官网</span></a> <div class="search-box mobile-search"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div></div> <div class="ant-col ant-col-xs-0 ant-col-sm-0 ant-col-md-18 ant-col-lg-19 ant-col-xl-19 ant-col-xxl-20"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><ul role="menu" id="nav" class="ant-menu ant-menu-horizontal ant-menu-root ant-menu-light"><li role="menuitem" class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="display:none;"><div aria-haspopup="true" class="ant-menu-submenu-title"><span>···</span><i class="ant-menu-submenu-arrow"></i></div></li><li role="menuitem" class="ant-menu-item"><a href="/" class="router-link-active">
          🏠首页
        </a></li><li role="menuitem" class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="display:none;"><div aria-haspopup="true" class="ant-menu-submenu-title"><span>···</span><i class="ant-menu-submenu-arrow"></i></div></li><li role="menuitem" class="ant-menu-item ant-menu-item-selected"><a href="/docs/" class="router-link-active">
          📖文档
        </a></li><li role="menuitem" class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="display:none;"><div aria-haspopup="true" class="ant-menu-submenu-title"><span>···</span><i class="ant-menu-submenu-arrow"></i></div></li><li role="menuitem" class="ant-menu-item"><a href="/laravel/">
          📖Laravel
        </a></li><li role="menuitem" class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="display:none;"><div aria-haspopup="true" class="ant-menu-submenu-title"><span>···</span><i class="ant-menu-submenu-arrow"></i></div></li><li role="menuitem" class="ant-menu-item"><a href="/faq/">
          🤔FAQ
        </a></li><li role="menuitem" class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="display:none;"><div aria-haspopup="true" class="ant-menu-submenu-title"><span>···</span><i class="ant-menu-submenu-arrow"></i></div></li><li role="menuitem" class="ant-menu-item"><a href="/donate/">
          🎉赞助名单
        </a></li><li role="menuitem" class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="display:none;"><div aria-haspopup="true" class="ant-menu-submenu-title"><span>···</span><i class="ant-menu-submenu-arrow"></i></div></li><li role="menuitem" class="ant-menu-submenu ant-menu-submenu-horizontal"><div aria-haspopup="true" class="ant-menu-submenu-title"><span>
          🚀仓库地址
        </span><i class="ant-menu-submenu-arrow"></i></div></li><li role="menuitem" class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="visibility:hidden;position:absolute;"><div aria-haspopup="true" class="ant-menu-submenu-title"><span>···</span><i class="ant-menu-submenu-arrow"></i></div></li></ul> <!----></nav></div></div> <!----></header> <aside class="sidebar"><div><div class="ads"><div id="ads_1"><img src="https://cover.kancloud.cn/akasishikelu/thinkphp6!middle"> <span title="基于 catchadmin 的 Thinkphp 6.0 企业级后台管理开发&amp;源码分析">基于 catchadmin 的 Thinkphp 6.0 企业级后台管理开发&amp;源码分析</span></div></div> <div role="separator" id="reset-margin" class="ant-divider ant-divider-horizontal ant-divider-dashed"></div></div> <ul class="sidebar-links"><li><a href="/docs/" aria-current="page" title="项目介绍" class="sidebar-link">项目介绍</a></li><li><a href="/docs/install.html" title="项目安装" class="sidebar-link">项目安装</a></li><li><a href="/docs/project-introduce.html" title="目录结构" class="sidebar-link">目录结构</a></li><li><a href="/docs/console.html" title="命令介绍" class="sidebar-link">命令介绍</a></li><li><a href="/docs/request.html" title="请求介绍" class="sidebar-link">请求介绍</a></li><li><a href="/docs/model.html" title="模型介绍" class="sidebar-link">模型介绍</a></li><li><a href="/docs/dataScope.html" title="权限介绍" class="sidebar-link">权限介绍</a></li><li><a href="/docs/extend.html" title="项目扩展" class="sidebar-link">项目扩展</a></li><li><a href="/docs/http.html" title="Http客户端" class="sidebar-link">Http客户端</a></li><li><a href="/docs/excel.html" title="Excel" class="sidebar-link">Excel</a></li><li><a href="/docs/sensitiveWord.html" title="敏感词" class="sidebar-link">敏感词</a></li><li><a href="/docs/crontab.html" title="定时任务新版" class="sidebar-link">定时任务新版</a></li><li><a href="/docs/catch-table.html" aria-current="page" title="表格组件" class="active sidebar-link">表格组件</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/docs/catch-table.html#表格组件" title="表格组件" class="sidebar-link">表格组件</a></li><li class="sidebar-sub-header"><a href="/docs/catch-table.html#后端" title="后端" class="sidebar-link">后端</a></li><li class="sidebar-sub-header"><a href="/docs/catch-table.html#表单组件" title="表单组件" class="sidebar-link">表单组件</a></li><li class="sidebar-sub-header"><a href="/docs/catch-table.html#额外支持的表单验证" title="额外支持的表单验证" class="sidebar-link">额外支持的表单验证</a></li></ul></li><li><a href="/docs/front.html" title="前端开发" class="sidebar-link">前端开发</a></li></ul></aside> <main class="page"> <div class="theme-antdocs-content content__default"><h2 id="表格组件"><a href="#表格组件" class="header-anchor">#</a> 表格组件</h2> <div class="custom-block warning"><p class="custom-block-title">WARNING</p> <p>表格组件目前可以完成正常的 85% 的操作，部分需求请回归正常的页面开发。再使用之前，请熟悉 element table 组件。
目前基础模块有大量案例可供参考。具体查看代码。有问题请去<a href="https://bbs.catchadmin.com/" target="_blank" rel="noopener noreferrer">论坛提问<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>，请不要在群里问，重复的问题太多。</p></div> <h2 id="后端"><a href="#后端" class="header-anchor">#</a> 后端</h2> <p>Table 组件目前由下面<code>Table</code>本身，<code>Search</code>组件和表格<code>Header</code>还有<code>Actions</code>组成。后端返回 <code>Json</code> 数据，给前端渲染页面表格。
所以这个要配合前端 table 是实现操作。在看视频介绍之前，一定要先看文档。<a href="https://www.bilibili.com/video/BV1Py4y1x7q5/" target="_blank" rel="noopener noreferrer"><strong>视频介绍</strong><span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>,记得<code>三连</code> + <code>关注</code>。之后更新视频可能会频繁一点。</p> <h3 id="table"><a href="#table" class="header-anchor">#</a> Table</h3> <ul><li>设置表格头部</li></ul> <div class="language-php extra-class"><pre class="language-php"><code>  table<span class="token operator">-&gt;</span><span class="token function">header</span><span class="token punctuation">(</span><span class="token keyword type-hint">array</span> <span class="token variable">$header</span><span class="token punctuation">)</span>
</code></pre></div><div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>$header 是 <code>HeaderItem</code> 集合，具体请看 <code>HeaderItem</code> 说明</p></div> <ul><li>设置表格操作</li></ul> <div class="language-php extra-class"><pre class="language-php"><code>  table<span class="token operator">-&gt;</span><span class="token function">withActions</span><span class="token punctuation">(</span><span class="token keyword type-hint">array</span> <span class="token variable">$actions</span><span class="token punctuation">)</span>
</code></pre></div><div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>$actions 是 <code>Actions</code> 集合，具体请看 <code>Actions</code> 说明</p></div> <ul><li>设置搜索</li></ul> <div class="language-php extra-class"><pre class="language-php"><code>  table<span class="token operator">-&gt;</span><span class="token function">withSearch</span><span class="token punctuation">(</span><span class="token keyword type-hint">array</span> <span class="token variable">$search</span><span class="token punctuation">)</span>
</code></pre></div><div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>$search 是由 <code>Search</code> 集合，具体请看 <code>Search</code> 说明</p></div> <ul><li>设置表格事件，具体查看 <a href="https://element.eleme.cn/#/zh-CN/component/table" target="_blank" rel="noopener noreferrer">Element Table Events<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul> <div class="language-php extra-class"><pre class="language-php"><code>  table<span class="token operator">-&gt;</span><span class="token function">withEvents</span><span class="token punctuation">(</span><span class="token keyword type-hint">array</span> <span class="token variable">$events</span><span class="token punctuation">)</span>
</code></pre></div><ul><li>设置默认搜索参数</li></ul> <div class="language-php extra-class"><pre class="language-php"><code>  table<span class="token operator">-&gt;</span><span class="token function">withDefaultQueryParams</span><span class="token punctuation">(</span><span class="token keyword type-hint">array</span> <span class="token variable">$params</span><span class="token punctuation">)</span>
</code></pre></div><ul><li>设置搜索参数</li></ul> <div class="language-php extra-class"><pre class="language-php"><code>  table<span class="token operator">-&gt;</span><span class="token function">withFilterParams</span><span class="token punctuation">(</span><span class="token keyword type-hint">array</span> <span class="token variable">$filterParams</span><span class="token punctuation">)</span>
</code></pre></div><ul><li>设置隐藏分页</li></ul> <div class="language-php extra-class"><pre class="language-php"><code>  table<span class="token operator">-&gt;</span><span class="token function">withHiddenPaginate</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
</code></pre></div><ul><li>设置表格列表路由</li></ul> <div class="language-php extra-class"><pre class="language-php"><code>  table<span class="token operator">-&gt;</span><span class="token function">withApiRoute</span><span class="token punctuation">(</span><span class="token keyword type-hint">string</span> <span class="token variable">$apiRoute</span><span class="token punctuation">)</span>
</code></pre></div><ul><li>设置表单弹出层的宽度</li></ul> <div class="language-php extra-class"><pre class="language-php"><code>  table<span class="token operator">-&gt;</span><span class="token function">withDialogWidth</span><span class="token punctuation">(</span><span class="token keyword type-hint">string</span> <span class="token variable">$width</span><span class="token punctuation">)</span>
</code></pre></div><ul><li>设置导入路由</li></ul> <div class="language-php extra-class"><pre class="language-php"><code>  table<span class="token operator">-&gt;</span><span class="token function">withImportRoute</span><span class="token punctuation">(</span><span class="token keyword type-hint">string</span> <span class="token variable">$route</span><span class="token punctuation">)</span>
</code></pre></div><ul><li>设置导出路由</li></ul> <div class="language-php extra-class"><pre class="language-php"><code>  table<span class="token operator">-&gt;</span><span class="token function">withExportRoute</span><span class="token punctuation">(</span><span class="token keyword type-hint">string</span> <span class="token variable">$route</span><span class="token punctuation">)</span>
</code></pre></div><ul><li>设置树状列表，具体查看 Element Tree Table</li></ul> <div class="language-php extra-class"><pre class="language-php"><code>  table<span class="token operator">-&gt;</span><span class="token function">toTreeTable</span><span class="token punctuation">(</span><span class="token keyword type-hint">string</span> <span class="token variable">$rowKey</span> <span class="token operator">=</span> <span class="token string single-quoted-string">'id'</span><span class="token punctuation">,</span> <span class="token keyword type-hint">array</span> <span class="token variable">$props</span> <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
</code></pre></div><ul><li>设置树状列表展开</li></ul> <div class="language-php extra-class"><pre class="language-php"><code>  <span class="token variable">$table</span><span class="token operator">-&gt;</span><span class="token function">expandAll</span><span class="token punctuation">(</span><span class="token keyword type-hint">bool</span> <span class="token variable">$expand</span><span class="token operator">=</span><span class="token constant boolean">true</span><span class="token punctuation">)</span>
</code></pre></div><ul><li>固定表头</li></ul> <div class="language-php extra-class"><pre class="language-php"><code>  <span class="token variable">$table</span><span class="token operator">-&gt;</span><span class="token function">withHeight</span><span class="token punctuation">(</span><span class="token keyword type-hint">int</span> <span class="token variable">$height</span><span class="token punctuation">)</span>
</code></pre></div><ul><li>斑马纹</li></ul> <div class="language-php extra-class"><pre class="language-php"><code>  <span class="token variable">$table</span><span class="token operator">-&gt;</span><span class="token function">withStripe</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
</code></pre></div><ul><li>绑定模式</li></ul> <div class="language-php extra-class"><pre class="language-php"><code><span class="token variable">$table</span><span class="token operator">-&gt;</span><span class="token function">withBind</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
</code></pre></div><div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>使用该方法之后，前端 <code>catch-table</code> 可以更加简洁的使用。注意看之后前端的说明</p></div> <ul><li>设置强制更新组件</li></ul> <div class="language-php extra-class"><pre class="language-php"><code>  table<span class="token operator">-&gt;</span><span class="token function">forceUpdate</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
</code></pre></div><p>快捷导入导出，只支持单模型导入导出</p> <div class="language-php extra-class"><pre class="language-php"><code>table<span class="token operator">-&gt;</span><span class="token function">withUsedModelAndExcel</span><span class="token punctuation">(</span><span class="token keyword type-hint">string</span> <span class="token variable">$usedModel</span><span class="token punctuation">,</span> <span class="token keyword type-hint">array</span> <span class="token variable">$excel</span><span class="token punctuation">)</span>
</code></pre></div><ul><li><code>usedModel</code> 必须使用的模型，例如 <code>Users::class</code></li></ul> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>$excel 是 Excel 对象 集合，具体看下面的 Excel 组件</p></div> <h3 id="search-搜索组件"><a href="#search-搜索组件" class="header-anchor">#</a> Search 搜索组件</h3> <ul><li><p>设置 label</p> <div class="language-php extra-class"><pre class="language-php"><code><span class="token class-name static-context">Search</span><span class="token operator">::</span><span class="token function">label</span><span class="token punctuation">(</span><span class="token keyword type-hint">string</span> <span class="token variable">$label</span><span class="token punctuation">)</span>
</code></pre></div><div class="custom-block warning"><p class="custom-block-title">WARNING</p> <p>label 设置是静态属性，所以需要每次都设置，不然不会清除</p></div></li> <li><p>设置 text，文本搜索</p> <div class="language-php extra-class"><pre class="language-php"><code><span class="token class-name static-context">Search</span><span class="token operator">::</span><span class="token function">text</span><span class="token punctuation">(</span><span class="token variable">$name</span><span class="token punctuation">,</span> <span class="token variable">$placeholder</span><span class="token punctuation">)</span>
</code></pre></div></li> <li><p>设置 select</p> <div class="language-php extra-class"><pre class="language-php"><code><span class="token class-name static-context">Search</span><span class="token operator">::</span><span class="token function">select</span><span class="token punctuation">(</span><span class="token variable">$name</span><span class="token punctuation">,</span> <span class="token variable">$placeholder</span><span class="token punctuation">,</span> <span class="token variable">$options</span><span class="token punctuation">)</span>
</code></pre></div></li> <li><p>设置 name, 默认 <code>name</code> 搜索</p> <div class="language-php extra-class"><pre class="language-php"><code><span class="token class-name static-context">Search</span><span class="token operator">::</span><span class="token function">name</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
</code></pre></div></li> <li><p>设置 status, 默认 <code>status</code> 状态搜索</p> <div class="language-php extra-class"><pre class="language-php"><code><span class="token class-name static-context">Search</span><span class="token operator">::</span><span class="token function">status</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
</code></pre></div></li> <li><p>设置 startAt, 默认 <code>start_at</code> 开始时间搜索</p> <div class="language-php extra-class"><pre class="language-php"><code><span class="token class-name static-context">Search</span><span class="token operator">::</span><span class="token function">startAt</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
</code></pre></div></li> <li><p>设置 endAt, 默认 <code>end_at</code> 结束时间搜索</p> <div class="language-php extra-class"><pre class="language-php"><code><span class="token class-name static-context">Search</span><span class="token operator">::</span><span class="token function">endAt</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
</code></pre></div></li></ul> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <p><code>Form</code> 组件的方法， <code>Search</code> 组件一样可以使用。根本上来说，<code>Search</code> 组件是由 <code>Form</code> 组件包装的</p></div> <h3 id="headeritem-表格列组件"><a href="#headeritem-表格列组件" class="header-anchor">#</a> HeaderItem 表格列组件</h3> <ul><li><p>设置 label</p> <div class="language-php extra-class"><pre class="language-php"><code><span class="token class-name static-context">HeaderItem</span><span class="token operator">::</span><span class="token function">label</span><span class="token punctuation">(</span><span class="token keyword type-hint">string</span> <span class="token variable">$label</span><span class="token punctuation">)</span>
</code></pre></div></li> <li><p>设置 prop</p> <div class="language-php extra-class"><pre class="language-php"><code><span class="token class-name static-context">HeaderItem</span><span class="token operator">::</span><span class="token function">prop</span><span class="token punctuation">(</span><span class="token keyword type-hint">string</span> <span class="token variable">$prop</span><span class="token punctuation">)</span>
</code></pre></div></li> <li><p>设置宽度</p> <div class="language-php extra-class"><pre class="language-php"><code><span class="token class-name static-context">HeaderItem</span><span class="token operator">::</span><span class="token function">width</span><span class="token punctuation">(</span><span class="token keyword type-hint">string</span> <span class="token variable">$width</span><span class="token punctuation">)</span>
</code></pre></div></li> <li><p>设置操作</p> <div class="language-php extra-class"><pre class="language-php"><code><span class="token class-name static-context">HeaderItem</span><span class="token operator">::</span><span class="token function">actions</span><span class="token punctuation">(</span><span class="token keyword type-hint">array</span> <span class="token variable">$actions</span><span class="token punctuation">)</span>
</code></pre></div><div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>$actions 是 <code>Actions</code> 对象集合</p></div></li> <li><p>设置排序</p> <div class="language-php extra-class"><pre class="language-php"><code><span class="token class-name static-context">HeaderItem</span><span class="token operator">::</span><span class="token function">sortable</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
</code></pre></div></li> <li><p>设置多选, 用在列表第一列，配合 table 的 <code>selectChange</code> 事件使用</p> <div class="language-php extra-class"><pre class="language-php"><code><span class="token class-name static-context">HeaderItem</span><span class="token operator">::</span><span class="token function">selection</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
</code></pre></div></li> <li><p>列设置不导出</p> <div class="language-php extra-class"><pre class="language-php"><code><span class="token class-name static-context">HeaderItem</span><span class="token operator">::</span><span class="token function">dontExport</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
</code></pre></div></li> <li><p>列设置不导入</p> <div class="language-php extra-class"><pre class="language-php"><code><span class="token class-name static-context">HeaderItem</span><span class="token operator">::</span><span class="token function">dontImport</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
</code></pre></div></li> <li><p>固定列</p> <div class="language-php extra-class"><pre class="language-php"><code><span class="token class-name static-context">HeaderItem</span><span class="token operator">::</span><span class="token function">fixed</span><span class="token punctuation">(</span><span class="token variable">$fixed</span> <span class="token operator">=</span> <span class="token constant boolean">true</span><span class="token punctuation">)</span>
</code></pre></div><div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>fixed 支持 <code>bool</code>，或者字符串 <code>left</code> 和 <code>right</code></p></div></li> <li><p>展开行</p> <div class="language-php extra-class"><pre class="language-php"><code><span class="token class-name static-context">HeaderItem</span><span class="token operator">::</span><span class="token function">expand</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
</code></pre></div></li></ul> <h4 id="table-列的插槽"><a href="#table-列的插槽" class="header-anchor">#</a> table 列的插槽</h4> <p>这些组件提供了列的数据可动态操作，除了内置的组件，自己也可以自定义列的插槽组件</p> <ul><li>switch 组件</li></ul> <div class="language-php extra-class"><pre class="language-php"><code><span class="token class-name static-context">HeaderItem</span><span class="token operator">::</span><span class="token function">withSwitchComponent</span><span class="token punctuation">(</span><span class="token keyword type-hint">array</span> <span class="token variable">$options</span> <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token variable">$updateFields</span> <span class="token operator">=</span> <span class="token constant">null</span><span class="token punctuation">)</span>
</code></pre></div><div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>可以使用 Form::options()-&gt;add('文字', 1)-&gt;render()</p></div> <ul><li>edit 组件</li></ul> <div class="language-php extra-class"><pre class="language-php"><code><span class="token class-name static-context">HeaderItem</span><span class="token operator">::</span><span class="token function">withEditComponent</span><span class="token punctuation">(</span><span class="token variable">$updateFields</span> <span class="token operator">=</span> <span class="token constant">null</span><span class="token punctuation">)</span>
</code></pre></div><ul><li>eidtNumber 组件</li></ul> <div class="language-php extra-class"><pre class="language-php"><code><span class="token class-name static-context">HeaderItem</span><span class="token operator">::</span><span class="token function">withEditNumberComponent</span><span class="token punctuation">(</span><span class="token variable">$updateFields</span> <span class="token operator">=</span> <span class="token constant">null</span><span class="token punctuation">)</span>
</code></pre></div><ul><li>select 组件</li></ul> <div class="language-php extra-class"><pre class="language-php"><code><span class="token class-name static-context">HeaderItem</span><span class="token operator">::</span><span class="token function">withSelectComponent</span><span class="token punctuation">(</span><span class="token keyword type-hint">array</span> <span class="token variable">$options</span><span class="token punctuation">,</span> <span class="token variable">$updateFields</span> <span class="token operator">=</span> <span class="token constant">null</span><span class="token punctuation">)</span>
</code></pre></div><ul><li>preview 组件（预览组件）</li></ul> <div class="language-php extra-class"><pre class="language-php"><code><span class="token class-name static-context">HeaderItem</span><span class="token operator">::</span><span class="token function">withPreviewComponent</span><span class="token punctuation">(</span><span class="token variable">$field</span> <span class="token operator">=</span> <span class="token constant">null</span><span class="token punctuation">)</span>
</code></pre></div><ul><li>component 组件</li></ul> <div class="language-php extra-class"><pre class="language-php"><code><span class="token class-name static-context">HeaderItem</span><span class="token operator">::</span><span class="token function">component</span><span class="token punctuation">(</span><span class="token keyword type-hint">string</span> <span class="token variable">$name</span><span class="token punctuation">,</span> <span class="token keyword type-hint">string</span> <span class="token variable">$updateField</span> <span class="token operator">=</span> <span class="token string single-quoted-string">''</span><span class="token punctuation">,</span> <span class="token variable">$options</span> <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
</code></pre></div><ul><li>下载 组件</li></ul> <div class="language-php extra-class"><pre class="language-php"><code><span class="token class-name static-context">HeaderItem</span><span class="token operator">::</span><span class="token function">withDownloadComponent</span><span class="token punctuation">(</span><span class="token variable">$field</span> <span class="token operator">=</span> <span class="token constant">null</span><span class="token punctuation">)</span>
</code></pre></div><h3 id="actions-组件"><a href="#actions-组件" class="header-anchor">#</a> Actions 组件</h3> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>Actions会创建对应的按钮操作</p></div> <ul><li>普通按钮<div class="language-php extra-class"><pre class="language-php"><code><span class="token class-name static-context">Actions</span><span class="token operator">::</span><span class="token function">normal</span><span class="token punctuation">(</span><span class="token keyword type-hint">string</span> <span class="token variable">$text</span><span class="token punctuation">,</span> <span class="token variable">$type</span> <span class="token operator">=</span> <span class="token string single-quoted-string">''</span><span class="token punctuation">,</span> <span class="token keyword type-hint">string</span> <span class="token variable">$event</span> <span class="token operator">=</span> <span class="token constant">null</span><span class="token punctuation">)</span>
</code></pre></div><ul><li>text：按钮显示的文字</li> <li>type：按钮的类型，具体查看 <a href="https://element.eleme.cn/#/zh-CN/component/button" target="_blank" rel="noopener noreferrer">Element button<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 的 type</li> <li>event：按钮的 <code>click</code> 事件，设置之后需要在前端实现该事件</li></ul></li> <li>创建操作<div class="language-php extra-class"><pre class="language-php"><code><span class="token class-name static-context">Actions</span><span class="token operator">::</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
</code></pre></div></li> <li>更新操作<div class="language-php extra-class"><pre class="language-php"><code><span class="token class-name static-context">Actions</span><span class="token operator">::</span><span class="token function">update</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
</code></pre></div></li> <li>删除操作<div class="language-php extra-class"><pre class="language-php"><code><span class="token class-name static-context">Actions</span><span class="token operator">::</span><span class="token function">delete</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
</code></pre></div></li> <li>查看操作<div class="language-php extra-class"><pre class="language-php"><code><span class="token class-name static-context">Actions</span><span class="token operator">::</span><span class="token function">view</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
</code></pre></div></li> <li>导出操作，配合 table 的 <code>exportRoute</code> 使用<div class="language-php extra-class"><pre class="language-php"><code><span class="token class-name static-context">Actions</span><span class="token operator">::</span><span class="token function">export</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
</code></pre></div></li> <li>导入操作, 配合 table 的 <code>importRoute</code> 使用<div class="language-php extra-class"><pre class="language-php"><code><span class="token class-name static-context">Actions</span><span class="token operator">::</span><span class="token function">import</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
</code></pre></div></li> <li>路由跳转<div class="language-php extra-class"><pre class="language-php"><code><span class="token class-name static-context">Actions</span><span class="token operator">::</span><span class="token function">to</span><span class="token punctuation">(</span><span class="token keyword type-hint">string</span> <span class="token variable">$router</span><span class="token punctuation">)</span>
</code></pre></div></li></ul> <h3 id="excel-组件"><a href="#excel-组件" class="header-anchor">#</a> Excel 组件</h3> <ul><li>设置 label<div class="language-php extra-class"><pre class="language-php"><code><span class="token class-name static-context">Excel</span><span class="token operator">::</span><span class="token function">label</span><span class="token punctuation">(</span><span class="token keyword type-hint">string</span> <span class="token variable">$label</span><span class="token punctuation">)</span>
</code></pre></div></li> <li>设置 prop<div class="language-php extra-class"><pre class="language-php"><code><span class="token class-name static-context">Excel</span><span class="token operator">::</span><span class="token function">prop</span><span class="token punctuation">(</span><span class="token keyword type-hint">string</span> <span class="token variable">$prop</span><span class="token punctuation">)</span>
</code></pre></div></li> <li>设置 options<div class="language-php extra-class"><pre class="language-php"><code><span class="token class-name static-context">Excel</span><span class="token operator">::</span><span class="token function">options</span><span class="token punctuation">(</span><span class="token keyword type-hint">array</span> <span class="token variable">$options</span><span class="token punctuation">)</span>
</code></pre></div></li></ul> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>提供字段枚举值的转换，例如表的 status 字段，<code>1</code> 代表 启用 <code>2</code> 代表禁用,那么可以按照下面的例子设置</p></div> <div class="language-php extra-class"><pre class="language-php"><code><span class="token punctuation">[</span>
   <span class="token punctuation">[</span>
     <span class="token string single-quoted-string">'label'</span> <span class="token operator">=&gt;</span> <span class="token string single-quoted-string">'启用'</span><span class="token punctuation">,</span>
     <span class="token string single-quoted-string">'value'</span> <span class="token operator">=&gt;</span> <span class="token number">1</span><span class="token punctuation">,</span>
   <span class="token punctuation">]</span><span class="token punctuation">,</span>

   <span class="token punctuation">[</span>
     <span class="token string single-quoted-string">'label'</span> <span class="token operator">=&gt;</span> <span class="token string single-quoted-string">'禁用'</span><span class="token punctuation">,</span>
     <span class="token string single-quoted-string">'value'</span> <span class="token operator">=&gt;</span> <span class="token number">2</span><span class="token punctuation">,</span>
   <span class="token punctuation">]</span>
<span class="token punctuation">]</span>
</code></pre></div><p>正确设置之后，导入导出才可以正确转换。</p> <ul><li><p>设置导入</p> <div class="language- extra-class"><pre class="language-text"><code>Excel::import(bool $import)
</code></pre></div><p>一般来说，你设置了字段都会在导入导出中使用，但是如果你不需要的，可以通过这个方法设置为 <code>false</code>,下面的 <code>export</code> 同理</p></li> <li><p>设置导出</p> <div class="language- extra-class"><pre class="language-text"><code>Excel::export(bool $export)
</code></pre></div></li></ul> <h3 id="前端"><a href="#前端" class="header-anchor">#</a> 前端</h3> <p>一般模式下前端 props 需要配合后端填充就可以了。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token operator">&lt;</span>catch<span class="token operator">-</span>table
  <span class="token operator">:</span>ref<span class="token operator">=</span><span class="token string">&quot;table.ref&quot;</span>
  <span class="token operator">:</span>headers<span class="token operator">=</span><span class="token string">&quot;table.headers&quot;</span>
  <span class="token operator">:</span>border<span class="token operator">=</span><span class="token string">&quot;true&quot;</span>
  <span class="token operator">:</span>search<span class="token operator">=</span><span class="token string">&quot;table.search&quot;</span>
  <span class="token operator">:</span>filterParams<span class="token operator">=</span><span class="token string">&quot;table.filterParams&quot;</span>
  <span class="token operator">:</span>formCreate<span class="token operator">=</span><span class="token string">&quot;formCreate&quot;</span>
  <span class="token operator">:</span>actions<span class="token operator">=</span><span class="token string">&quot;table.actions&quot;</span>
  <span class="token operator">:</span>table<span class="token operator">-</span>events<span class="token operator">=</span><span class="token string">&quot;table.events&quot;</span>
  <span class="token operator">:</span>api<span class="token operator">-</span>route<span class="token operator">=</span><span class="token string">&quot;table.apiRoute&quot;</span>
  <span class="token operator">:</span>selectable<span class="token operator">=</span><span class="token string">&quot;selectable&quot;</span>
<span class="token operator">/</span><span class="token operator">&gt;</span>
</code></pre></div><p><code>绑定模式</code>下的操作更加简洁</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token operator">&lt;</span>catch<span class="token operator">-</span>table
  <span class="token operator">:</span>formCreate<span class="token operator">=</span><span class="token string">&quot;formCreate&quot;</span>
  v<span class="token operator">-</span>bind<span class="token operator">=</span><span class="token string">&quot;table&quot;</span>
<span class="token operator">/</span><span class="token operator">&gt;</span>
</code></pre></div><h2 id="表单组件"><a href="#表单组件" class="header-anchor">#</a> 表单组件</h2> <p>表单组件前端基于 <a href="http://www.form-create.com/v2/guide/" target="_blank" rel="noopener noreferrer">form-create<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>, 后端基于其 <a href="http://php.form-create.com/docs/2.0/README" target="_blank" rel="noopener noreferrer">PHP 扩展包<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>。请在使用前阅读其文档。Form 在其基础上做了适配后台的非过度封装。
下面是新增的 Form 组件。</p> <h3 id="图片上传"><a href="#图片上传" class="header-anchor">#</a> 图片上传</h3> <div class="language-php extra-class"><pre class="language-php"><code><span class="token class-name static-context">Form</span><span class="token operator">::</span><span class="token function">image</span><span class="token punctuation">(</span><span class="token keyword type-hint">string</span> <span class="token variable">$title</span><span class="token punctuation">,</span> <span class="token keyword type-hint">string</span> <span class="token variable">$value</span> <span class="token operator">=</span> <span class="token string single-quoted-string">''</span><span class="token punctuation">)</span>
</code></pre></div><h3 id="多图上传"><a href="#多图上传" class="header-anchor">#</a> 多图上传</h3> <div class="language-php extra-class"><pre class="language-php"><code><span class="token class-name static-context">Form</span><span class="token operator">::</span><span class="token function">images</span><span class="token punctuation">(</span><span class="token keyword type-hint">string</span> <span class="token variable">$title</span><span class="token punctuation">,</span> <span class="token keyword type-hint">string</span> <span class="token variable">$value</span> <span class="token operator">=</span> <span class="token string single-quoted-string">''</span><span class="token punctuation">)</span>
</code></pre></div><h3 id="文件上传"><a href="#文件上传" class="header-anchor">#</a> 文件上传</h3> <div class="language-php extra-class"><pre class="language-php"><code><span class="token class-name static-context">Form</span><span class="token operator">::</span><span class="token function">file</span><span class="token punctuation">(</span><span class="token keyword type-hint">string</span> <span class="token variable">$title</span><span class="token punctuation">,</span> <span class="token keyword type-hint">string</span> <span class="token variable">$value</span> <span class="token operator">=</span> <span class="token string single-quoted-string">''</span><span class="token punctuation">)</span>
</code></pre></div><h3 id="多文件上传"><a href="#多文件上传" class="header-anchor">#</a> 多文件上传</h3> <div class="language-php extra-class"><pre class="language-php"><code><span class="token class-name static-context">Form</span><span class="token operator">::</span><span class="token function">files</span><span class="token punctuation">(</span><span class="token keyword type-hint">string</span> <span class="token variable">$title</span><span class="token punctuation">,</span> <span class="token keyword type-hint">string</span> <span class="token variable">$value</span> <span class="token operator">=</span> <span class="token string single-quoted-string">''</span><span class="token punctuation">)</span>
</code></pre></div><h3 id="编辑器"><a href="#编辑器" class="header-anchor">#</a> 编辑器</h3> <div class="language-php extra-class"><pre class="language-php"><code><span class="token class-name static-context">Form</span><span class="token operator">::</span><span class="token function">editor</span><span class="token punctuation">(</span><span class="token variable">$field</span><span class="token punctuation">,</span> <span class="token variable">$title</span><span class="token punctuation">,</span> <span class="token variable">$value</span> <span class="token operator">=</span> <span class="token string single-quoted-string">''</span><span class="token punctuation">)</span>
</code></pre></div><div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>编辑器需要在 <code>Dialog</code> 中初始化，否则在第二次打开无法使用。具体请看 <a href="https://bbs.catchadmin.com/topic/118" target="_blank" rel="noopener noreferrer"><code>论坛解决方案</code><span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p></div> <h3 id="省市区"><a href="#省市区" class="header-anchor">#</a> 省市区</h3> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>在使用省区市组件之前，也要使用 <code>php think region</code> 命令获取省市区数据，之后在使用组件</p></div> <div class="language-php extra-class"><pre class="language-php"><code><span class="token class-name static-context">Form</span><span class="token operator">::</span><span class="token function">area</span><span class="token punctuation">(</span><span class="token variable">$field</span><span class="token punctuation">,</span> <span class="token variable">$title</span><span class="token punctuation">,</span> <span class="token variable">$props</span> <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
</code></pre></div><h2 id="额外支持的表单验证"><a href="#额外支持的表单验证" class="header-anchor">#</a> 额外支持的表单验证</h2> <h3 id="正则验证"><a href="#正则验证" class="header-anchor">#</a> 正则验证</h3> <div class="language-php extra-class"><pre class="language-php"><code><span class="token class-name static-context">Form</span><span class="token operator">::</span><span class="token function">validatePattern</span><span class="token punctuation">(</span><span class="token keyword type-hint">string</span> <span class="token variable">$pattern</span><span class="token punctuation">)</span>
</code></pre></div><h3 id="纯数字验证"><a href="#纯数字验证" class="header-anchor">#</a> 纯数字验证</h3> <div class="language-php extra-class"><pre class="language-php"><code><span class="token class-name static-context">Form</span><span class="token operator">::</span><span class="token function">validateAlpha</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
</code></pre></div><h3 id="支持字母和数字"><a href="#支持字母和数字" class="header-anchor">#</a> 支持字母和数字</h3> <div class="language-php extra-class"><pre class="language-php"><code><span class="token class-name static-context">Form</span><span class="token operator">::</span><span class="token function">validateAlphaNum</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
</code></pre></div><h3 id="字母和数字-下划线-及破折号"><a href="#字母和数字-下划线-及破折号" class="header-anchor">#</a> 字母和数字，下划线_及破折号-</h3> <div class="language-php extra-class"><pre class="language-php"><code><span class="token class-name static-context">Form</span><span class="token operator">::</span><span class="token function">validateAlphaDash</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
</code></pre></div><h3 id="手机号"><a href="#手机号" class="header-anchor">#</a> 手机号</h3> <div class="language-php extra-class"><pre class="language-php"><code><span class="token class-name static-context">Form</span><span class="token operator">::</span><span class="token function">validateMobile</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
</code></pre></div><h3 id="身份证"><a href="#身份证" class="header-anchor">#</a> 身份证</h3> <div class="language-php extra-class"><pre class="language-php"><code><span class="token class-name static-context">Form</span><span class="token operator">::</span><span class="token function">validateIdCard</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
</code></pre></div><h3 id="邮政编码"><a href="#邮政编码" class="header-anchor">#</a> 邮政编码</h3> <div class="language-php extra-class"><pre class="language-php"><code><span class="token class-name static-context">Form</span><span class="token operator">::</span><span class="token function">validateZip</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
</code></pre></div><h3 id="ip地址"><a href="#ip地址" class="header-anchor">#</a> IP地址</h3> <div class="language-php extra-class"><pre class="language-php"><code><span class="token class-name static-context">Form</span><span class="token operator">::</span><span class="token function">validateIp</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
</code></pre></div><h3 id="座机"><a href="#座机" class="header-anchor">#</a> 座机</h3> <div class="language-php extra-class"><pre class="language-php"><code><span class="token class-name static-context">Form</span><span class="token operator">::</span><span class="token function">validateLandLine</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
</code></pre></div><h3 id="密码"><a href="#密码" class="header-anchor">#</a> 密码</h3> <div class="language-php extra-class"><pre class="language-php"><code><span class="token class-name static-context">Form</span><span class="token operator">::</span><span class="token function">validatePassword</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
</code></pre></div><h3 id="强密码"><a href="#强密码" class="header-anchor">#</a> 强密码</h3> <div class="language-php extra-class"><pre class="language-php"><code><span class="token class-name static-context">Form</span><span class="token operator">::</span><span class="token function">validateStrongPassword</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
</code></pre></div><h3 id="纯汉字"><a href="#纯汉字" class="header-anchor">#</a> 纯汉字</h3> <div class="language-php extra-class"><pre class="language-php"><code><span class="token class-name static-context">Form</span><span class="token operator">::</span><span class="token function">validateChineseCharacter</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
</code></pre></div><h3 id="form-的最佳实践"><a href="#form-的最佳实践" class="header-anchor">#</a> Form 的最佳实践</h3> <p><code>CatchAdmin</code> 是模块化的，那么模块只管理模块的 <code>Form</code> 就好了。因为每个模块的 <code>Form</code> 只是渲染页面，而不涉及数据操作。所以针对每个模块使用 <code>Factory</code>来管理，那么针对所有模块则使用了抽象工厂。下面来看看如何做的。</p> <p>首先在任意模块创建 <code>form</code> 文件夹，然后创建 <code>Factory.php</code> 文件</p> <div class="language-php extra-class"><pre class="language-php"><code><span class="token keyword">use</span> <span class="token package">catcher<span class="token punctuation">\</span>library<span class="token punctuation">\</span>form<span class="token punctuation">\</span>FormFactory</span><span class="token punctuation">;</span>

<span class="token keyword">class</span> <span class="token class-name">Factory</span> <span class="token keyword">extends</span> <span class="token class-name">FormFactory</span>
<span class="token punctuation">{</span>
    <span class="token keyword">public</span> <span class="token keyword">static</span> <span class="token keyword">function</span> <span class="token function">from</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">:</span> <span class="token keyword return-type">string</span>
    <span class="token punctuation">{</span>
        <span class="token keyword">return</span> <span class="token constant">__NAMESPACE__</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><p>继承 <code>FormFactory</code> 抽象工厂，实现<code>from</code> 方法，返回当前的 Namespace 就可以。</p> <p>创建一个 From.php 文件。继承 Form 之后，实现 fields 方法。</p> <div class="language-php extra-class"><pre class="language-php"><code><span class="token keyword">use</span> <span class="token package">catcher<span class="token punctuation">\</span>library<span class="token punctuation">\</span>form<span class="token punctuation">\</span>Form</span><span class="token punctuation">;</span>

<span class="token keyword">class</span> <span class="token class-name">Form</span> <span class="token keyword">extends</span> <span class="token class-name">Form</span>
<span class="token punctuation">{</span>
    <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function">fields</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">:</span> <span class="token keyword return-type">array</span>
    <span class="token punctuation">{</span>
        <span class="token comment">// TODO: Implement fields() method.</span>
        <span class="token keyword">return</span> <span class="token punctuation">[</span>
            <span class="token keyword static-context">self</span><span class="token operator">::</span><span class="token function">input</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'job_name'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'岗位名称'</span><span class="token punctuation">)</span><span class="token operator">-&gt;</span><span class="token function">required</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>

            <span class="token keyword static-context">self</span><span class="token operator">::</span><span class="token function">input</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'coding'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'岗位编码'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>

            <span class="token keyword static-context">self</span><span class="token operator">::</span><span class="token function">radio</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'status'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'状态'</span><span class="token punctuation">)</span><span class="token operator">-&gt;</span><span class="token function">value</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token operator">-&gt;</span><span class="token function">options</span><span class="token punctuation">(</span>
                <span class="token keyword static-context">self</span><span class="token operator">::</span><span class="token function">options</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">-&gt;</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'启用'</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token operator">-&gt;</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'禁用'</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">)</span><span class="token operator">-&gt;</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
            <span class="token punctuation">)</span><span class="token punctuation">,</span>

            <span class="token keyword static-context">self</span><span class="token operator">::</span><span class="token function">number</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'sort'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'排序'</span><span class="token punctuation">)</span><span class="token operator">-&gt;</span><span class="token function">value</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token operator">-&gt;</span><span class="token function">min</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token operator">-&gt;</span><span class="token function">max</span><span class="token punctuation">(</span><span class="token number">10000</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
        <span class="token punctuation">]</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

<span class="token punctuation">}</span>
</code></pre></div><p>最后创建使用工厂生产 Form。</p> <div class="language-php extra-class"><pre class="language-php"><code><span class="token class-name static-context">Factory</span><span class="token operator">::</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'form'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div></div> <footer class="page-edit"><div class="edit-link"><a href="https://github.com/catch-admin/document/edit/master/docs/docs/catch-table.md" target="_blank" rel="noopener noreferrer">在 Github 编辑此页</a> <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></div> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev"><a href="/docs/crontab.html" class="prev"><i aria-label="icon: left" class="anticon anticon-left"><svg viewBox="64 64 896 896" focusable="false" data-icon="left" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 0 0 0 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"></path></svg></i>
        定时任务新版
      </a></span> <span class="next"><a href="/docs/front.html">
        前端开发
        <i aria-label="icon: right" class="anticon anticon-right"><svg viewBox="64 64 896 896" focusable="false" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path></svg></i></a></span></p></div> </main> <!----></div><div class="global-ui"></div></div>
    <script src="/assets/js/app.d0396f44.js" defer></script><script src="/assets/js/2.1cef47df.js" defer></script><script src="/assets/js/7.ba30e213.js" defer></script>
  </body>
</html>